<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>pager用法</title>
    <link rel="stylesheet" href="../common/css/pager.css">

</head>
<body>
<div class="pageBox">
    <table style="width: 100%">
        <thead>
        <tr>
            <th>No</th>
            <th>阿斯蒂芬</th>
            <th>阿斯顿</th>
        </tr>
        </thead>
        <tbody class="pageDiv clearfix">

        </tbody>
    </table>
    <div class="notContent hide">
        无数据
    </div>
    <div class="page">
        <ul class="pageMenu clearfix">
            <li class="firstPage">首页</li>
            <li class="prevPage"> < 上一页</li>
            <div class="pageObj ">

            </div>
            <li class="nextPage"> 下一页 ></li>
            <li class="lastPage">尾页</li>
            <li class="last" style="font-size: 14px;">
                共<span class="totalPage"></span>页，跳转至 <input type="number" class="keuInput" value="1">
                <button type="button" class="btnSure">确定</button>
            </li>
        </ul>
    </div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./pager.js"></script>

<script>
    $(function () {
        $(".pageBox").pageFun({
            /*在本地服务器上才能访问*/
            interFace: "page.json", /*接口*/
            displayCount: 5, /*每页显示总条数*/
            maxPage: 5, /*每次最多加载多少页*/
            dataFun: function (data) {
                var dataHtml = '<tr><td>' + data.dataNum + '</td><td>' + data.content + '</td><td>' + data.cut + '</td></tr>';
                return dataHtml;
            },
            pageFun: function (i) {
                var pageHtml = '<li class="pageNum">' + i + '</li>';
                return pageHtml;
            }

        })
    })
</script>
</body>
</html>

